{extend name="../../admin/view/main"}

{block name='content'}
<div class="think-box-shadow portal-block-container notselect">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-125deg,#57bdbf,#2f9de2)">
                <div>设备总量</div>
                <div>{$techTotal|default='0'}</div>
                <div>平台接入设备数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-app"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-125deg,#ff7d7d,#fb2c95)">
                <div>在线设备</div>
                <div>{$usersTotal|default='0'}</div>
                <div>当前在线设备数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-user"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md2">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-113deg,#c543d8,#925cc3)">
                <div>离线设备</div>
                <div>{$orderTotal|default='0'}</div>
                <div>当前离线设备数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-form"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md2">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-141deg,#ecca1b,#f39526)">
                <div>未激活设备</div>
                <div>{$amountTotal|default='0'}</div>
                <div>未激活设备数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-rmb"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md2">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-141deg,#ecca1b,#f39526)">
                <div>异常设备</div>
                <div>{$amountTotal|default='0'}</div>
                <div>异常设备数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-rmb"></i>
        </div>
    </div>
</div>
<div class="think-box-shadow portal-block-container notselect">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-125deg,#57bdbf,#2f9de2)">
                <div>设备总量</div>
                <div>{$techTotal|default='0'}</div>
                <div>平台接入设备数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-app"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-125deg,#ff7d7d,#fb2c95)">
                <div>在线设备</div>
                <div>{$usersTotal|default='0'}</div>
                <div>当前在线设备数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-user"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-141deg,#ecca1b,#f39526)">
                <div>宠物总量</div>
                <div>{$amountTotal|default='0'}</div>
                <div>平台宠物总数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-rmb"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-141deg,#ecca1b,#f39526)">
                <div>宠物总量</div>
                <div>{$amountTotal|default='0'}</div>
                <div>平台宠物总数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-rmb"></i>
        </div>
    </div>
</div>
<div class="layui-row layui-col-space15 margin-top-10">
    <div class="layui-col-xs12 layui-col-md6 padding-bottom-0">
        <div class="think-box-shadow">
            <div id="member_day10" style="width:100%;height:350px"></div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-md6 padding-bottom-0">
        <div class="think-box-shadow">
            <div id="breed" style="width:100%;height:350px"></div>
        </div>
    </div>
</div>

<!--<label class="layui-hide">-->
<!--    <textarea id="jsondata1">{$days|json_encode}</textarea>-->
<!--    <textarea id="jsondata2">{$levels|json_encode}</textarea>-->
<!--</label>-->

<script>

    require(['echarts'], function (echarts) {
        (function (charts) {
            window.addEventListener("resize", function () {
                charts.resize()
            });
            charts.setOption({
                title: {text: '近10日新增用户统计', left: 'center'},
                xAxis: {

                    type: 'category',
                    data: ['A', 'B', 'C']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [120, 200, 150],
                        type: 'line'
                    }
                ]
            });
        })(echarts.init(document.getElementById('member_day10')));
        (function (charts) {
            window.addEventListener("resize", function () {
                charts.resize()
            });
            charts.setOption({
                title: {text: '品种统计', left: 'center'},
                series: [
                    {
                        type: 'pie',
                        data: [
                            {
                                value: 335,
                                name: '直接访问'
                            },
                            {
                                value: 234,
                                name: '联盟广告'
                            },
                            {
                                value: 1548,
                                name: '搜索引擎'
                            }
                        ]
                    }
                ]
            });
        })(echarts.init(document.getElementById('breed')));
    });
</script>

{/block}